<template>
    <div class="item" @click="toStore">
        <img :src="itemContent.pic" alt="">
        <div class="item-right">
            <div class="title">{{ itemContent.title }}</div>
            <div class="sales">{{ itemContent.sales }}</div>
            <div class="price">{{ itemContent.price }}</div>
            <div class="label">
                <div v-for="(im, ix) in itemContent.label" :key="ix">
                    {{im }}
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {useRouter} from 'vue-router'
export default {
    props: {
        itemContent: {
            type: Object,
            default: ()=>{}
        }
    },
    setup(){
        const router = useRouter()
        const toStore = ()=>{
            router.push('/store')
        }
        return {
            toStore
        }
    }
}
</script>
<style lang="less" scoped>
    .item{
        background-color: #fff;
        border-radius: 10px;
        padding: 10px;
        display: flex;
        font-size: 14px;
        img{
            border-radius: 10px;
            width: 120px;
            height: 120px;
            margin-right: 20px;
        }
        .item-right{
            display: flex;
            flex-flow: column;
            justify-content: space-around;
            .title{
                font-size: 18px;
            }
            .label{
                display: flex;
                div{
                    background-color: #ffc400;
                    border-radius: 4px;
                    padding: 2px 5px;
                }
                div:not(:first-child){
                    margin-left: 5px;
                }
            }
        }
    }
    .item:not(:first-child){
        margin-top: 10px;
    }
</style>